/*
* BSTimelineModule
*
* Ken Frederick
* frederickk@google.com
*
*/


var BSTimelineModule = function(container, parameters) {
    // ------------------------------------------------------------------------
    //
    // Properties
    //
    // ------------------------------------------------------------------------
    // instantiate a base to share common
    // properties and methods across BSTimeline classes
    // (bootleg inheritance :)
    var base = BSTimelineBase;

    container = container || document.body;

    var properties = base.combine({
        backgroundColor : base.randomHex(),
        color           : 'rgba(30, 20, 15, 0.9)',
        spacing         : 1.0
    }, parameters);

    var width = container.offsetWidth;
    var height = container.offsetHeight;



    // ------------------------------------------------------------------------
    //
    // Methods
    //
    // ------------------------------------------------------------------------
    /**
     * [draw description]
     * @param  {number} x
     * @param  {number} y
     * @param  {number} w
     * @param  {number} h
     * @param  {object} parameters additional CSS parameters
     *
     */
    function draw(x, y, w, h, parameters) {
        var c = new CSSTwo(container);
        properties = base.combine(properties, parameters);

        var rect = c.rect(x, y, w, h, properties);
        if (properties.classes) {
            rect.classList.add(properties.classes);
        }
        var line = c.line(
            x,   // x1
            (110 - container.offsetTop), // y1
            x,   // x2
            (document.body.scrollHeight - container.offsetTop), // y2
            {
                borderColor : properties.backgroundColor,
                borderStyle : 'dotted'
            }
        );


        // events
        var onMouseMove;
        var onMouseUp;
        var onMouseExit;

        var movementX;
        var movementY;

        rect.onmousedown = function(event) {
            movementX = 0;
            movementY = 0;

            onMouseMove = function(event) {
                movementX = event.movementX | event.webkitMovementX | event.mozMovementX | 0;

                rect.style.left = parseFloat(rect.style.left) + movementX + 'px';
                line.style.left = parseFloat(line.style.left) + movementX + 'px';

                if (rect.style.left < 0) {
                    var offset = -parseFloat(rect.style.left);

                    rect.style.left = parseFloat(rect.style.left) + offset + 'px';
                    line.style.left = parseFloat(line.style.left) + offset + 'px';
                }

                movementY = event.movementY | event.webkitMovementY | event.mozMovementY | 0;

                rect.style.top = parseFloat(rect.style.top) + movementY + 'px';

            };

            onMouseUp = function(event) {
                // snap to timeline increment
                rect.style.left = base.snap(parseFloat(rect.style.left), properties.spacing) + 'px';

                // TODO: bit hacky... but works
                container.removeChild(line);
                line = c.line(
                    base.snap(parseFloat(rect.style.left), properties.spacing),  // x1
                    (110 - container.offsetTop), // y1
                    base.snap(parseFloat(rect.style.left), properties.spacing),  // x2
                    (document.body.scrollHeight - container.offsetTop), // y2
                    {
                        borderColor: properties.backgroundColor,
                        borderStyle: 'dotted'
                    }
                );

                // snap to height
                rect.style.top = base.snap(parseFloat(rect.style.top), parseFloat(rect.style.height)) + 'px';

                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
            };

            onMouseExit = function(event) {
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
            };

            document.addEventListener('mousemove', onMouseMove, false);
            document.addEventListener('mouseup', onMouseUp, false);

            // rect.addEventListener('mouseleave', onMouseExit, false);
        };

    };


    // ------------------------------------------------------------------------
    return {
        draw : draw
    };

};


